<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="套餐名称:">
          <el-input
            v-model="formInline.seal_name"
            placeholder="请输入套餐名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" class="movement">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
          <el-button type="primary" @click="handleEdit1(true)">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <!-- <span class="gauge">订单收入金额:222223333 元</span> -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        max-height="600"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          :index="indexMethod"
          width="70"
        >
        </el-table-column>
        <el-table-column prop="seal_name" align="center" label="套餐名称">
        </el-table-column>
        <el-table-column prop="nums" align="center" label="套餐数量">
        </el-table-column>
        <!-- <el-table-column prop="order_no" align="center" label="关联订单">
        </el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="goods_names"
          align="center"
          label="套餐商品"
        >
          <template slot-scope="scope">
            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.goods_names"
              placement="top-start"
            > -->
            <span class="text shouhuo">{{ scope.row.goods_names }}</span>
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              active-text="上架"
              inactive-text="下架"
              @change="ifLook(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit1(false, scope.row)"
              >查看</el-button
            >
            <!-- <el-button
              size="mini"
              type="success"
              @click="handleEdit(true, scope.row)"
              v-if="scope.row.status == 0"
              >去处理</el-button
            > -->
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(true, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          ref="dataCollection"
          :model="form"
          label-width="100px"
          :rules="rules"
        >
          <span>
            <h4>套餐信息</h4>
          </span>
          <el-form-item label="套餐名称" class="spanMag" prop="seal_name">
            <el-input
              :disabled="!addBtnFlag"
              v-model="form.seal_name"
              placeholder="请输入套餐名称"
              style="width: 100%"
            ></el-input>
            <!-- {{ form.remark }} -->
          </el-form-item>
          <el-form-item label="套餐数量" class="spanMag" prop="nums">
            <el-input
              :disabled="!addBtnFlag"
              v-model="form.nums"
              placeholder="请输入套餐数量"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="套餐类型" class="movement" prop="type_id">
            <el-select
              v-model="form.type_id"
              placeholder="请选择"
              :disabled="!addBtnFlag"
            >
              <el-option
                v-for="item in optionsClass"
                :key="item.id"
                :label="item.type_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="addBtnFlag" label="套餐图片" prop="imageUrl">
            <div class="unlodBox">
              <el-upload
                class="upload-demo"
                action
                :http-request="uploadFiles"
                ref="upload"
                :limit="fileLimit"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
              >
                <el-image
                  v-if="imageUrl"
                  class="imageGood"
                  :src="imageUrl"
                  style="width: 360px; height: 180px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item v-if="!addBtnFlag" label="套餐图片">
            <el-image
              fit="cover"
              style="width: 120px; height: 120px"
              :src="imgHeader + form.img"
            >
            </el-image>
          </el-form-item>
          <el-form-item label="套餐说明" prop="desc">
            <el-input
              :disabled="!addBtnFlag"
              v-model="form.desc"
              type="textarea"
              :rows="2"
              placeholder="请输入套餐说明"
            ></el-input>
            <!-- {{ form.notes }} -->
          </el-form-item>
          <div v-if="!addBtnFlag">
            <span>
              <h4>商品信息</h4>
            </span>
            <el-table
              :data="goodsTable"
              border
              style="width: 100%"
              max-height="400"
              class="tableBox"
            >
              <el-table-column
                prop="name"
                align="center"
                label="商品名称"
                width=""
              >
              </el-table-column>
              <!-- <el-table-column
                prop="order_no"
                align="center"
                label="商品图片"
                width=""
              >
                <template slot-scope="scope">
                  <el-image
                    style="width: 70px; height: 70px; width: 70px"
                    :src="imgHeader+ scope.row.img"
                  ></el-image>
                </template>
              </el-table-column> -->
              <el-table-column
                prop="color"
                align="center"
                label="商品颜色"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="order_no"
                align="center"
                label="商品类型"
                width=""
              >
                <template slot-scope="scope"> 辅材 </template>
              </el-table-column>
              <el-table-column
                prop="brand_name"
                align="center"
                label="商品品牌"
                width=""
              >
              </el-table-column>
              <!-- <el-table-column
                prop="origin"
                align="center"
                label="商品产地"
                width=""
              >
              </el-table-column> -->
              <el-table-column
                prop="texture"
                align="center"
                label="商品材质"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="model"
                align="center"
                label="商品型号"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="size"
                align="center"
                label="商品尺寸"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="unit"
                align="center"
                label="商品单位"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="weight"
                align="center"
                label="商品重量"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="nums"
                align="center"
                label="商品数量"
                width=""
              >
                <!-- <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.nums"
                    placeholder="数量"
                  ></el-input>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="sell_price"
                align="center"
                label="商品价格"
                width=""
              >
              </el-table-column>
              <!-- <el-table-column
                prop="order_no"
                align="center"
                label="操作"
                width=""
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, goodsTable)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column> -->
            </el-table>
            <!-- <div>
              商品总价：{{
                form.order_info ? form.order_info.goods_amount : ""
              }}
            </div> -->
          </div>

          <!-- <div class="textFor">商品总价: {{ form.goods_amount }} 元</div> -->
          <div v-if="addBtnFlag">
            <span style="margin-top: 20px; display: block">
              <h4>添加商品</h4>
            </span>
            <div>
              <el-button type="text" @click="addFuGoods"
                >添加现有商品</el-button
              >
              <!-- <el-button type="text" @click="goAdd">新增商品</el-button> -->
            </div>
            <div>
              <el-table
                :data="goodsTable"
                border
                style="width: 100%"
                max-height="400"
                class="tableBox"
              >
                <el-table-column
                  prop="name"
                  align="center"
                  label="商品名称"
                  width=""
                >
                </el-table-column>
                <!-- <el-table-column
                  prop="order_no"
                  align="center"
                  label="商品图片"
                  width=""
                >
                  <template slot-scope="scope">
                    <el-image
                      style="width: 70px; height: 70px; width: 70px"
                      :src="imgHeader+ scope.row.img"
                    ></el-image>
                  </template>
                </el-table-column> -->
                <el-table-column
                  prop="color"
                  align="center"
                  label="商品颜色"
                  width=""
                >
                </el-table-column>
                <el-table-column
                  prop="order_no"
                  align="center"
                  label="商品类型"
                  width=""
                >
                  <template slot-scope="scope"> 辅材 </template>
                </el-table-column>
                <el-table-column
                  prop="brand_name"
                  align="center"
                  label="商品品牌"
                  width=""
                >
                </el-table-column>
                <!-- <el-table-column
                  prop="origin"
                  align="center"
                  label="商品产地"
                  width=""
                >
                </el-table-column> -->
                <el-table-column
                  prop="texture"
                  align="center"
                  label="商品材质"
                  width=""
                >
                </el-table-column>
                <el-table-column
                  prop="model"
                  align="center"
                  label="商品型号"
                  width=""
                >
                </el-table-column>
                <el-table-column
                  prop="size"
                  align="center"
                  label="商品尺寸"
                  width=""
                >
                </el-table-column>
                <el-table-column
                  prop="unit"
                  align="center"
                  label="商品单位"
                  width=""
                >
                </el-table-column>
                <el-table-column
                  prop="weight"
                  align="center"
                  label="商品重量"
                  width=""
                >
                </el-table-column>
                <el-table-column
                  prop="nums"
                  align="center"
                  label="商品数量"
                  width=""
                >
                  <template slot-scope="scope">
                    <el-input
                      type="number"
                      min="0"
                      v-model="scope.row.nums"
                      placeholder="数量"
                    ></el-input>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  prop="sell_price"
                  align="center"
                  label="商品价格"
                  width=""
                >
                </el-table-column> -->
                <el-table-column
                  prop="order_no"
                  align="center"
                  label="操作"
                  width=""
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="
                        deleteRow(scope.$index, goodsTable)
                      "
                      type="text"
                      size="small"
                    >
                      移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-dialog
            width="40%"
            title="选择现有商品"
            :visible.sync="innerVisible"
            append-to-body
            :before-close="handleCloseInner"
          >
            <el-cascader
              v-model="value"
              :options="options"
              :props="propsoption"
              clearable
              collapse-tags
              @change="chooseGoods"
            ></el-cascader>
            <div class="herDist">
              <el-tag
                class="userIndex"
                v-for="(item, index) in selectDate"
                :key="index"
                >{{
                  item.name +
                  "  :" +
                  item.size +
                  "  - " +
                  item.weight +
                  " ￥" +
                  item.sell_price
                }}</el-tag
              >
            </div>
            <el-button
              @click="savegoods"
              type="primary"
              style="margin: 10px auto"
              >提交</el-button
            >
          </el-dialog>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="save" type="primary" v-if="addBtnFlag"
          >提交</el-button
        >
        <el-button @click="backtrack">返回</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
  
<script>
import {
  jiancaiHandeWrite,
  writeJiancai,
  listDate,
  getjiancaiGood,
  submitWrite,
  uploadFiles,
  genreList,
} from "../../../utils/api";
import {
  getForemanSetList,
  getForemanSetListDetail,
  editForemanSetList,
  addForemanSetList,
  getFuGoodsClass,
  editKXXM,
} from "../../../utils/main";
export default {
  data() {
    return {
      fileLimit: 1,
      //   上传图片
      fileList: [],
      fileType: ["png", "jpg", "jpeg"],
      headers: { "Content-Type": "multipart/form-data" },
      imageUrl: "",
      imageUrl1: "",
      fucaiID: 0,
      selectDate: [],
      value: "",
      imgHeader: this.Global.imgHeader,
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      innerVisible: false,
      formInline: {
        seal_name: "",
        status: "",
      },
      tableData: [],
      goodsTable: [],
      //查看
      form: { seal_name: "", nums: "", desc: "", goods_ids: [], type_id: 1 },
      //分页器
      total: 0,
      limit: 10,
      page: 1,
      total1: 0,
      limit1: 10,
      page1: 1,
      addBtnFlag: false,
      options1: [
        {
          value: "1",
          label: "上架",
        },
        {
          value: "2",
          label: "下架",
        },
      ],
      rules: {
        seal_name: [
          { required: true, message: "请输入套餐名称", trigger: "blur" },
        ],
        type_id: [
          { required: true, message: "请选择套餐类型", trigger: "change" },
        ],
        nums: [
          { required: true, message: "请输入套餐数量", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(0|[1-9]\d*)$/;
              if (!reg.test(value)) {
                callback(new Error("请输入不小于0的整数"));
              }
              if (value > 999999999) {
                callback(new Error("不能大于999999999"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        desc: [{ required: true, message: "请输入套餐说明", trigger: "blur" }],
      },
      // listOne: [],
      options: [],
      optionsClass: [],
      propsoption: {
        multiple: true,
        label: "name",
        value: "id",
        // checkStrictly: true,
        // emitPath: false,
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node;
          let nodeList = [];
          setTimeout(() => {
            // const nodes = Array.from({ length: level + 1 }).map((item) => ({
            //   // value: ++id,
            //   // label: `选项${id}`,
            //   leaf: level >= 1,
            // }));
            // console.log(resolve);
            // console.log(level);
            if (level == 1) {
              this.getSort(node.value)
                .then((res) => {
                  if (res.data.status) {
                    this.options.find((e) => {
                      return e.id == node.value;
                    }).children = res.data.data;
                  }
                  nodeList = this.options.find((e) => {
                    return e.id == node.value;
                  }).children;
                  resolve(nodeList);
                })
                .catch((err) => {
                  resolve(nodeList);
                });
            }

            if (level == 2) {
              resolve(nodeList);
            }

            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          }, 1000);
        },
      },
    };
  },
  methods: {
    // handImg(e) {
    //   return e.split(",")[0];
    // },
    ifLook(row) {
      // console.log(row.status);
      editForemanSetList(
        this.token,
        row.id,
        row.status,
        [],
        "",
        "",
        "",
        "",
        ""
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    // 新增
    handleRemove() {},
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //上传文件的格式
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        // 如果文件类型不在允许上传的范围内;
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    //上传成功后的回调
    handleSuccess(i) {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      // this.handleClose();
      this.fileList.splice(i, 1); //删除上传的文件
    },
    //上传文件的事件
    uploadFiles(item) {
      this.$message("文件上传中........");
      //上传文件的需要formdata类型;所以要转
      uploadFiles(item.file).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          console.log(res);
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          this.imageUrl1 = res.data.data.saveurl;
          this.imageUrl = res.data.data.weburl;
          this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
          let i = this.fileList.indexOf(item.file);
          this.handleSuccess(i);
        }
      });
    },
    handleCloseInner() {
      this.innerVisible = false;
      this.selectDate = [];
      this.value = "";
    },
    // handlePreviewImg(list, index) {
    //   let arr = [];
    //   if (list.length == 1) {
    //     arr.push(list[0]);
    //   } else if (list.length == 0) {
    //     return arr;
    //   } else {
    //     for (let i = 0; i < list.length; i++) {
    //       arr.push(list[i + index]);
    //       if (i + index >= list.length - 1) {
    //         index = 0 - (i + 1);
    //       }
    //     }
    //   }
    //   return arr;
    // },
    savegoods() {
      this.goodsTable = this.selectDate;
      this.innerVisible = false;
    },
    chooseGoods(e) {
      let list = JSON.parse(JSON.stringify(e));
      let list1 = [];
      console.log(list);
      list.forEach((item) => {
        if (item.length >= 2) {
          list1.push(
            this.options
              .find((item1) => {
                return item1.id == item[0];
              })
              .children.find((item1) => {
                return item1.id == item[1];
              })
            // .children.find((item1) => {
            //   return item1.id == item[2];
            // })
          );
          //   console.log(item[2]);
          //   // this.options
        }
      });
      this.selectDate = list1;
    },
    // chooseGoods(e) {
    //   let list = JSON.parse(JSON.stringify(e));
    //   console.log(list, "list");
    //   let list1 = [];
    //   // console.log(list);
    //   list.forEach((item) => {
    //     // if (item.length >= 2) {
    //     list1.push(
    //       this.options.find((item1) => {
    //         return item1.id == item[0];
    //       })
    //     );
    //     //   console.log(item[2]);
    //     //   // this.options
    //     // }
    //   });
    //   this.selectDate = list1;
    //   console.log(this.selectDate, "selectDate");
    // },
    // 保存   提交
    //确定添加
    save() {
      this.$refs["dataCollection"].validate((valid) => {
        if (valid) {
          let list = [];
          let reg = /^[1-9]\d*$/;
          this.goodsTable.forEach((item) => {
            if (!reg.test(item.nums)) {
              this.$message("商品数量请输入不是以0开头的正整数");
              return;
            }
            if (item.nums >= 1) {
              list.push({
                goods_id: item.id,
                nums: item.nums,
                sell_price: item.sell_price,
              });
            }
          });
          if (list.length == 0) {
            this.$message("请填写商品数量");
            return;
          }
          // this.listOne = list;
          // console.log(this.formLabelAlign, "8888880");
          if (this.form.id != null) {
            // console.log(this.formLabelAlign, "000");
            // 编辑
            editForemanSetList(
              this.token,
              this.form.id,
              this.form.status,
              JSON.stringify(list),
              this.form.seal_name,
              this.form.nums,
              this.form.type_id,
              this.imageUrl1,
              this.form.desc
            ).then((res) => {
              if (res.data.status) {
                this.$message({
                  message: "修改成功",
                });
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          } else {
            console.log(111);
            // console.log(this.formLabelAlign, "111");
            // 新增
            addForemanSetList(
              this.token,
              // this.form.id,
              // this.form.status,
              JSON.stringify(list),
              this.form.seal_name,
              this.form.nums,
              this.form.type_id,
              this.imageUrl1,
              this.form.desc
            ).then((res) => {
              if (res.data.status) {
                this.$message({
                  message: "新增成功",
                });
                this.total = res.data.data.count;
                // this.formLabelAlign = {};
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // save() {
    //   let list = [];
    //   let reg = /^[1-9]\d*$/;

    //   this.goodsTable.forEach((item) => {
    //     if (!reg.test(item.nums)) {
    //       this.$message("商品数量请输入不是以0开头的正整数");
    //       return;
    //     }
    //     if (item.nums >= 1) {
    //       list.push({ goods_id: item.id, nums: item.nums });
    //     }
    //   });
    //   if (list.length == 0) {
    //     this.$message("请填写商品数量");
    //     return;
    //   }
    //   submitWrite(
    //     this.token,
    //     this.form.id,
    //     JSON.stringify(list),
    //     55,
    //     this.form.notes,
    //     this.form.user_id,
    //     sessionStorage.getItem("user_id")
    //   ).then((res) => {
    //     if (res.data.status) {
    //       this.dialogVisible = false;
    //       this.getList();
    //     }
    //   });
    // },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // goAdd() {
    //   this.$router.push("/list/merchandise");
    // },
    addFuGoods() {
      this.innerVisible = true;
    },
    getList() {
      getForemanSetList(
        this.token,
        this.formInline.seal_name,
        this.formInline.status,
        this.page,
        this.limit
      ).then((res) => {
        if (res.data.status) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.count;
          this.optionsClass = res.data.data.type_data;
          // this.tableData.forEach((element) => {
          //   if (element.status != null) {
          //     // 0 未处理 1 已处理
          //     if (element.status == 0) {
          //       element.status_text = "未处理";
          //     }
          //     if (element.status == 1) {
          //       element.status_text = "已处理";
          //     }
          //   }
          // });
        }
      });
    },
    getGoodsSelect() {
      genreList(this.token).then((res) => {
        if (res.data.status) {
          this.options = res.data.data;
          this.options = this.options.filter(function (item) {
            return item.id !== 234;
          });
          // this.total = res.data.data.count;
        }
      });
    },
    // timeChange(e) {
    //   let time = e;
    //   if (typeof time === "number" && time.toString().length === 10) {
    //     time = time * 1000;
    //   }
    //   let date = new Date(time);
    //   let Y = date.getFullYear();
    //   let M = date.getMonth() + 1;
    //   let D = date.getDate();
    //   let hh = date.getHours();
    //   let mm = date.getMinutes();
    //   let ss = date.getSeconds();
    //   M = M < 10 ? "0" + M : M;
    //   D = D < 10 ? "0" + D : D;
    //   hh = hh < 10 ? "0" + hh : hh;
    //   mm = mm < 10 ? "0" + mm : mm;
    //   ss = ss < 10 ? "0" + ss : ss;
    //   return Y + "-" + M + "-" + D + " " + hh + ":" + mm + ":" + ss;
    // },
    //查询
    onSearch() {
      this.page = 1;
      this.getList();
    },
    //重置
    onReset() {
      (this.formInline = {
        seal_name: "",
        status: "",
      }),
        this.getList();
    },
    // 序号排序
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    handleEdit1(flag) {
      this.addBtnFlag = flag;
      this.dialogVisible = true;
      this.goodsTable = [];
      this.form = {
        seal_name: "",
        nums: "",
        desc: "",
      };
      this.imageUrl = "";
      // (this.form.seal_name = ""),
      // (this.form.nums = ""),
      // (this.imageUrl = ""),
      // (this.form.desc = "");
      // console.log(row);
      // getFuHandwritingDetail(this.token, row.id).then((res) => {
      //   if (res.data.status) {
      //     this.dialogVisible = true;
      //     this.form = res.data.data;
      //     this.goodsTable = this.form.goods_list;
      //     if (this.form.delivery_method == 1) {
      //       this.form.delivery_method_text = "商家配送";
      //     }
      //     if (this.form.delivery_method == 2) {
      //       this.form.delivery_method_text = "用户自提";
      //     }
      //     //1原地卸货 2 电梯上楼 3 楼梯上楼
      //     if (this.form.up_method == 1) {
      //       this.form.up_method_text = "原地卸货";
      //     }
      //     if (this.form.up_method == 2) {
      //       this.form.up_method_text = "电梯上楼";
      //     }
      //     if (this.form.up_method == 3) {
      //       this.form.up_method_text = "楼梯上楼";
      //     }
      //     this.form.voice_notes1 = JSON.parse(this.form.voice_notes);
      //     this.form.imglist = this.form.img.split(",");
      //     this.form.imglist1 = [];
      //     this.form.img.split(",").forEach((item) => {
      //       this.form.imglist1.push("https://bjsf.bjsky.top/" + item);
      //     });
      //   }
      // });
    },
    //详情
    handleEdit1(flag, row) {
      this.addBtnFlag = flag;

      this.dialogVisible = true;
      // console.log(row);
      getForemanSetListDetail(this.token, row.id).then((res) => {
        if (res.data.status) {
          this.form = res.data.data;
          this.imageUrl = this.imgHeader + this.form.img;
          this.goodsTable = res.data.data.goods_list;
          // this.goodsTable = this.form.goods_list;
          // this.form.voice_notes1 = JSON.parse(this.form.voice_notes);
          // this.form.imglist = this.form.img.split(",");
          // this.form.imglist1 = [];
          // this.form.img.split(",").forEach((item) => {
          //   this.form.imglist1.push("https://bjsf.bjsky.top/" + item);
          // });
        }
      });
    },
    //编辑
    handleEdit(flag, row) {
      this.addBtnFlag = flag;
      if (row.status == 1) {
        this.$message.warning("上架状态下不能编辑");
        return;
      }
      this.dialogVisible = true;
      // console.log(row);
      getForemanSetListDetail(this.token, row.id).then((res) => {
        if (res.data.status) {
          this.form = res.data.data;
          this.imageUrl = this.imgHeader + this.form.img;
          this.goodsTable = res.data.data.goods_list;
          // this.goodsTable = this.form.goods_list;
          // this.form.voice_notes1 = JSON.parse(this.form.voice_notes);
          // this.form.imglist = this.form.img.split(",");
          // this.form.imglist1 = [];
          // this.form.img.split(",").forEach((item) => {
          //   this.form.imglist1.push("https://bjsf.bjsky.top/" + item);
          // });
        }
      });
    },
    //关闭
    handleClose(done) {
      this.$refs.dataCollection.resetFields();
      if (this.$refs.audio) {
        this.$refs.audio.pause();
      }
      done();
    },
    //弹框序号
    // indexM(index) {
    // if (this.token < this.limit) {
    //   return this.total - index;
    // } else {
    //   return (
    //     this.total - (this.currentPage - 1) * this.limit - index
    //   );
    // }
    // },
    //返回
    backtrack() {
      this.$refs.dataCollection.resetFields();
      this.dialogVisible = false;
    },
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      // console.log(`当前页: ${val}`);
      this.getList();
    },
    getSort(id) {
      return new Promise((resolve, reject) => {
        getFuGoodsClass(this.token, id).then((res) => {
          if (res.data.status) {
            // this.options = res.data.data;
            // this.total = res.data.data.count;
            resolve(res);
          }
        });

        // listDate(this.token, this.pageSize, "", id, this.page).then((res) => {
        //   resolve(res);
        // });
      });
    },
  },
  mounted() {
    this.getList();
    this.getGoodsSelect();
  },
};
</script>
  
<style scoped>
.text {
  font-size: 14px;
}

/* .item {
    margin-bottom: 18px;
} */
.modality {
  display: flex;
  width: 100%;
}

.modality .leftImg {
  width: 20%;
}

.modalityUser {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  width: 70%;
  justify-content: center;
}

.modalityUser .item {
  display: block;
  text-align: left;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
} */

.box-card {
  width: 100%;
}

/* .gauge {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
} */

.oneLine {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.formUser {
  width: 60%;
}

/* .el-form-item {
  display: flex;
  width: 100%;
} */

/* .el-form-item .el-form-item__label {
  width: 60%;
} */

.shouhuo {
  display: -webkit-box;
  /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
  -webkit-box-orient: vertical;
  /*要显示的行数*/
  -webkit-line-clamp: 2;
  /* 溢出部分隐藏 */
  overflow: hidden;
}
.herDist {
  height: 300px;
  width: 80%;
  border: 1px solid #1a171711;
  overflow: auto;
  margin-top: 20px;
}
.userIndex {
  margin: 10px 10px;
}
.tableBox {
  margin-bottom: 10px;
  margin-top: 10px;
}
.demo-form-inline {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
.spanMag {
  width: 300px;
}
</style>